<template>
  <div class="push-alarm-container">
    <el-form :model="pushForm" :rules="pushRules" ref="pushFormRef" label-width="120px">
      <el-form-item label="报警ID">
        <el-input v-model="pushForm.alarmId" disabled />
      </el-form-item>
      <el-form-item label="接收人" prop="userIds">
        <el-select 
          v-model="pushForm.userIds" 
          placeholder="请选择接收人" 
          multiple 
          filterable
          style="width: 100%">
          <el-option 
            v-for="user in userList" 
            :key="user.id" 
            :label="user.name" 
            :value="user.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="推送渠道" prop="channels">
        <el-checkbox-group v-model="pushForm.channels">
          <el-checkbox :label="1">短信</el-checkbox>
          <el-checkbox :label="2">APP</el-checkbox>
          <el-checkbox :label="3">站内信</el-checkbox>
          <el-checkbox :label="4">系统弹窗</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    
    <div class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">推送</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { pushAlarm } from '@/api/prod_operate/alarm_management'

const props = defineProps({
  alarmId: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['success', 'cancel'])

const pushFormRef = ref(null)
const userList = ref([])

const pushForm = ref({
  alarmId: props.alarmId,
  userIds: [],
  channels: []
})

const pushRules = {
  userIds: [{ required: true, message: '请选择接收人', trigger: 'change' }],
  channels: [{ required: true, message: '请选择推送渠道', trigger: 'change' }]
}

// 获取用户列表（这里应该从API获取）
const fetchUserList = async () => {
  // TODO: 从API获取用户列表
  userList.value = [
    { id: 'user001', name: '运维主管' },
    { id: 'user002', name: '现场工程师A' },
    { id: 'user003', name: '现场工程师B' }
  ]
}

// 提交推送
const handleSubmit = async () => {
  if (!pushFormRef.value) return
  
  await pushFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await pushAlarm(pushForm.value)
        if (res.code === 200) {
          ElMessage.success('推送成功')
          emit('success')
        } else {
          ElMessage.error(res.msg || '推送失败')
        }
      } catch (error) {
        ElMessage.error('推送失败：' + error.message)
      }
    }
  })
}

// 取消
const handleCancel = () => {
  emit('cancel')
}

onMounted(() => {
  fetchUserList()
})
</script>

<style scoped>
.push-alarm-container {
  padding: 20px;
}
</style>

